<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">
    <link href="../lib/icons.css" rel="stylesheet">

    <title>Stack Menu - Metro UI :: Popular HTML, CSS and JS library</title>

</head>
<body class="cloak h-100-vh" style="height: 884px">
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
    <div class="app-bar-item-static no-hover">
        <div class="text-leader">Stack Menu</div>
    </div>
    <div class="app-bar-item-static no-hover ml-auto">
        <input type="checkbox" data-role="theme-switcher"/>
    </div>
</nav> 

<div data-role="stack-menu" 
     class="pos-relative open" 
     style="height: 100%" 
     data-root-title="Product Catalog" 
     data-back-button-icon="<span class='mif-chevron-left'>"
     data-size="320"
>
    <div class="title">Каталог товарів</div>
    <ul>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/Xiaomi_RED.svg" class="icon" loading="lazy">
                Xiaomi
            </a>
            <ul>
                <li>
                    <a href="#">Smartphones</a>
                    <ul>
                        <li><a href="#">Xiaomi 15</a></li>
                        <li><a href="#">Xiaomi 14T</a></li>
                        <li><a href="#">Readmi Note 14</a></li>
                        <li><a href="#">Readmi 13</a></li>
                    </ul>
                </li>
                <li><a href="#">Health and sports</a></li>
                <li><a href="#">Tablets</a></li>
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Smart house</a></li>
                <li><a href="#">Multimedia</a></li>
                <li><a href="#">Lifestyle</a></li>
                <li><a href="#">Accessories</a></li>
            </ul>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/Scooter.svg" class="icon" loading="lazy">
                Transport and cycling
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_1.svg" class="icon" loading="lazy">
                Smartphones and phones
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_2.svg" class="icon" loading="lazy">
                TV and Multimedia
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_3.svg" class="icon" loading="lazy">
                Home Appliances
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_4.svg" class="icon" loading="lazy">
                Laptops, PCs and Tablets
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_16.svg" class="icon" loading="lazy">
                Gaming Products
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_5.svg" class="icon" loading="lazy">
                Smartwatches and Gadgets
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_6.svg" class="icon" loading="lazy">
                Audio
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_7.svg" class="icon" loading="lazy">
                Sports and Health
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_8.svg" class="icon" loading="lazy">
                Tourism and Fishing
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_9.svg" class="icon" loading="lazy">
                Repair and Equipment
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_10.svg" class="icon" loading="lazy">
                Cottage, Home and Garden
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_11.svg" class="icon" loading="lazy">
                Pet Supplies
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_12.svg" class="icon" loading="lazy">
                Children's Products
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_13.svg" class="icon" loading="lazy">
                Auto and Moto Products
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/trumaj_zarjad_black.svg" class="icon" loading="lazy">
                Keep Charged
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_14.svg" class="icon" loading="lazy">
                Clothing and Accessories
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i.allo.ua/media/catalog/category/mega_menu/file_15.svg" class="icon" loading="lazy">
                Perfumes, Care, Jewelry
            </a>
        </li>
    </ul>
</div>

<script src="../lib/metro.js"></script>
<script>
</script>
</body>
</html>
